<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Test - OHOS ArchInfo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 3px;
        }
        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
        button {
            padding: 8px 16px;
            margin: 5px;
            cursor: pointer;
        }
        pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/purl.js"></script>
    <script src="js/ohos.archinfo.js"></script>
</head>
<body>
    <h1>OHOS ArchInfo FastAPI 兼容性测试</h1>

    <div class="test-section">
        <h2>1. 基础连接测试</h2>
        <button onclick="testConnection()">测试连接</button>
        <div id="connection-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>2. 产品列表测试</h2>
        <button onclick="testProducts()">获取产品列表</button>
        <div id="products-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>3. API前缀测试</h2>
        <button onclick="testApiPrefix()">测试API前缀</button>
        <div id="prefix-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>4. 模块API测试</h2>
        <input type="text" id="product-input" placeholder="产品名 (如: ohos_rk3568)" value="ohos_rk3568" style="width: 150px; margin-right: 10px;">
        <input type="text" id="version-input" placeholder="版本 (如: 3.2.6.5)" value="3.2.6.5" style="width: 120px; margin-right: 10px;">
        <button onclick="testModulesAPI()">测试模块API</button>
        <div id="modules-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>5. 实时状态</h2>
        <button onclick="checkStatus()">检查服务状态</button>
        <div id="status-result" class="result"></div>
    </div>

    <script>
        function testConnection() {
            const resultDiv = document.getElementById('connection-result');
            resultDiv.innerHTML = '测试中...';

            $.ajax({
                url: '/',
                method: 'GET',
                success: function(data) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '<strong>✓ 连接成功</strong><br>服务器响应正常';
                },
                error: function(xhr, status, error) {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = '<strong>✗ 连接失败</strong><br>错误: ' + error;
                }
            });
        }

        function testProducts() {
            const resultDiv = document.getElementById('products-result');
            resultDiv.innerHTML = '获取产品列表中...';

            $.ajax({
                url: '/symdb/products',
                method: 'GET',
                success: function(data) {
                    resultDiv.className = 'result success';
                    try {
                        const products = JSON.parse(data);
                        resultDiv.innerHTML = '<strong>✓ 产品列表获取成功</strong><br>' +
                            '产品数量: ' + (products.data ? products.data.length : 0) + '<br>' +
                            '<pre>' + JSON.stringify(products, null, 2) + '</pre>';
                    } catch (e) {
                        resultDiv.innerHTML = '<strong>✓ 响应获取成功</strong><br>' +
                            '原始数据: <pre>' + data + '</pre>';
                    }
                },
                error: function(xhr, status, error) {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = '<strong>✗ 获取产品列表失败</strong><br>错误: ' + error +
                        '<br>状态码: ' + xhr.status;
                }
            });
        }

        function testApiPrefix() {
            const resultDiv = document.getElementById('prefix-result');
            const prefix = fnGetProductRestPrefix();

            resultDiv.className = 'result';
            resultDiv.innerHTML = '<strong>API前缀配置:</strong><br>' +
                'REST_API_PREFIX = ' + REST_API_PREFIX + '<br>' +
                'fnGetProductRestPrefix() = ' + prefix + '<br>' +
                '当前产品参数: ' + $.url().param('product') + '<br>' +
                '当前版本参数: ' + $.url().param('version');
        }

        function testModulesAPI() {
            const resultDiv = document.getElementById('modules-result');
            const product = document.getElementById('product-input').value;
            const version = document.getElementById('version-input').value;

            if (!product || !version) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '<strong>✗ 请输入产品和版本信息</strong>';
                return;
            }

            resultDiv.innerHTML = '测试模块API中...';

            // 构造测试URL
            const testUrl = '/symdb/products/' + product + '/' + version + '/modules';

            $.ajax({
                url: testUrl,
                method: 'GET',
                success: function(data) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '<strong>✓ 模块API测试成功</strong><br>' +
                        '测试URL: ' + testUrl + '<br>' +
                        '响应长度: ' + data.length + ' 字符<br>' +
                        '<pre>' + data.substring(0, 500) + (data.length > 500 ? '...' : '') + '</pre>';
                },
                error: function(xhr, status, error) {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = '<strong>✗ 模块API测试失败</strong><br>' +
                        '测试URL: ' + testUrl + '<br>' +
                        '错误: ' + error + '<br>' +
                        '状态码: ' + xhr.status + '<br>' +
                        '响应: ' + xhr.responseText;
                }
            });
        }

        function checkStatus() {
            const resultDiv = document.getElementById('status-result');
            resultDiv.innerHTML = '检查服务状态中...';

            // 检查多个端点
            const checks = [
                { name: '主页', url: '/' },
                { name: '产品API', url: '/symdb/products' },
                { name: 'API文档', url: '/docs' }
            ];

            let results = '';
            let completed = 0;

            checks.forEach(function(check) {
                $.ajax({
                    url: check.url,
                    method: 'GET',
                    success: function(data) {
                        results += '✓ ' + check.name + ' (' + check.url + ') - 正常<br>';
                    },
                    error: function(xhr, status, error) {
                        results += '✗ ' + check.name + ' (' + check.url + ') - 错误: ' + error + '<br>';
                    },
                    complete: function() {
                        completed++;
                        if (completed === checks.length) {
                            resultDiv.className = 'result';
                            resultDiv.innerHTML = '<strong>服务状态检查完成:</strong><br>' + results;
                        }
                    }
                });
            });
        }

        // 页面加载时自动运行一些测试
        $(document).ready(function() {
            testApiPrefix();
        });
    </script>
</body>
</html>